import React, { useState } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import {
  DashboardOutlined,
  UnorderedListOutlined,
  PlusSquareOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { history } from 'umi';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

import 'react-quill/dist/quill.snow.css';
import './index.less';

const ICONMAP = {
  'DashboardOutlined': <DashboardOutlined />,
  'UnorderedListOutlined': <UnorderedListOutlined />,
  'PlusSquareOutlined': <PlusSquareOutlined />,
}

export default (props: any) => {
  const [collapsed, setCollapsed] = useState<boolean>(false);
  const [pathname, setPathname] = useState('/task/list');

  const onCollapse = () => {
    setCollapsed(!collapsed);
  }

  const renderMenu = () => (
    <Menu theme="dark" mode="inline" selectedKeys={[pathname]}>
      {
        props.route.routes.map((item: any) => (
          <Menu.Item
            key={item.path}
            icon={ICONMAP[item.icon]}
            onClick={() => {
              history.push(item.path);
              setPathname(item.path)
            }}
          >
            {item.name}
          </Menu.Item>
        ))
      }
    </Menu>
  )

  const renderBreadcrumb = () => (
    <Breadcrumb style={{ margin: '16px 0' }}>
    </Breadcrumb>
  )

  console.log(props);
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className="logo">安全联邦学习平台</div>
        {renderMenu()}
      </Sider>

      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }} />
        <Content style={{ margin: '0 16px' }}>
          {renderBreadcrumb()}

          <div className="site-layout-background" style={{ padding: 36, minHeight: 760 }}>
            {props.children}
          </div>
        </Content>

        <Footer style={{ textAlign: 'center' }}>基于区块链的安全联邦学习平台 ©2021 Created by</Footer>
      </Layout>
    </Layout>
  );
};

